<template>
    <div class="content"  v-show="screenWidth >= 700">
        <div class="title_s">
            <img draggable="false" src="http://test.bjclb.cn/uploads/assets/top.png">
            <ul class="pcul">
                <li>
                    <span>输入您想要生成PPT的主题，AI帮您生成相关内容，完成后您可进行PPT文件下载。</span>
                </li>
                <li style="flex-direction: row-reverse;">
                    <div class="p-r p-r_">
                            <div style="width: calc(100% - 115px);">
                                <van-field
                                    maxlength="8000"
                                    :border="false"
                                    v-model="message"
                                    rows="1"
                                    autosize
                                    type="textarea"
                                    autofocus
                                    :disabled="outline_show"
                                />
                            </div>
                        <img :class="[outline_show?'click_':'scale-box']" draggable="false" @click="outlinelist" class="p-a" src="http://test.bjclb.cn/uploads/assets/return.png" alt="">
                    </div>
                </li>
                <li v-if="show_type == 1">
                    <span>好的，已收到您的要求，让我先为您生成PPT标题和大纲</span>
                </li>
                <div class="container" v-show="outline_show">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </ul>
            <div class="templatepc" v-if="outline_list.length > 0">
                <div class="c99 f14">大纲内容</div>
                <div class="outline">
                    <div class="d-f p-r outline_title">
                        <div class="c99">主标题</div>
                        <label class="c33 f-w ov">{{outline_title.title}}</label>
                    </div>
                    <div class="d-f p-r outline_title">
                        <div class="c99">副标题</div>
                        <label class="c33 f-w ov">{{outline_title.subTitle}}</label>
                    </div>
                </div>
                <div class="outline">
                    
                    <div class="outline_" v-for="(item,index) in outline_list">
                        <div class="d-f p-r outline_title">
                            <div class="c99">章节{{index+1}}</div>
                            <div class="c33 f-w ov">{{item.chapterTitle}}</div>
                        </div>
                        <div class="d-f p-r outline_text p-r" v-for="items in item.chapterContents">
                            <div class="c99"></div>
                            <div class="c33 ov">{{items.chapterTitle}}</div>
                        </div>
                    </div>
                </div>
                <div @click="next_" class="but scale-box cff f16 d-f j-c">
                    下一步
                </div>
            </div>
        </div>
        
        <div class="template_color" v-if="themelist_.length > 0 && template_show">
            <div class="c99 f14 d-f j-b template_title">
                <div class="template_left">
                    <img draggable="false" @click="template_show=false" src="http://test.bjclb.cn/uploads/assets/fh.png" alt="">
                    请于下方选择您想要的模板配色
                </div>
                <div @click="next_step" :class="[shows?'click_':'']" class="but scale-box cff f16 d-f j-c">
                    下一步
                </div>
            </div>
            <div class="template_s">
                <div class="c66 f16 f-w template_moban">官方模板</div>
                <div class="template_">
                    <div class="list p-r" @click="show_(index,item.key)" v-for="(item, index) in themelist_">
                        <img draggable="false" :src="item.thumbnail" alt="">
                        <div class="c33 f16">{{item.name}}</div>
                        <img draggable="false" v-show="show == index" class="p-a" src="http://test.bjclb.cn/uploads/assets/mengban.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="loding p-f" v-if="shows">
            <div class="center t-c">
                <img draggable="false" class="loding1" src="http://test.bjclb.cn/uploads/assets/loding1.png" alt="">
                <div class="loding2 d-f">
                    <div class="progress-wrap">
                        <div class="progress-inner" :style="'width:' + num + '%;'">
                            <div class="progress-nums"></div>
                        </div>
                    </div>
                    <!-- <img draggable="false" :style="'width:' + num + '%;'" src="http://test.bjclb.cn/uploads/assets/loding2.png" alt=""> -->
                </div>
                <div class="c33 f12">LOADING…</div>
                <div class="c33 f18">PPT生成中</div>
            </div>
        </div>
    </div>
    <div class="contents" v-show="screenWidth < 700">
        <div style="width: 100%;position: sticky; padding-bottom:calc( var(--van-tabbar-height));">
            <div class="title">工作台</div>
            <div v-show="type == 1"  style="padding-bottom:calc( var(--van-tabbar-height));">
                <div class="top">
                    <div class="f32 c24 f-w">PPT 创作-主题创建中</div>
                    <div class="c99 f26">输入您想要生成PPT的主题，AI帮您生成相关内容，完成后您可进行PPT文件下载。 </div>
                </div>
                <!-- <div class="c99 f24 t-c">15:11</div> -->
                <ul class="ydui">
                    <li class="f30" style="">
                        <span>您好，我是您的专属PPTAI助手，今天需要我协助完成什么内容?</span>
                    </li>
                    <li v-if="show_type == 1">
                        <span>好的，已收到您的要求，让我先为您生成PPT标题和大纲</span>
                    </li>
                    <div class="container" v-show="outline_show">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="templatepc" v-if="outline_list.length > 0">
                        <div class="c99 f14">大纲内容</div>
                        <div class="outline">
                            <div class="d-f p-r outline_title">
                                <div class="c99">主标题</div>
                                <div class="c33 f-w ov">{{outline_title.title}}</div>
                            </div>
                            <div class="d-f p-r outline_title">
                                <div class="c99">副标题</div>
                                <div class="c33 f-w ov">{{outline_title.subTitle}}</div>
                            </div>
                        </div>
                        <div class="outline">
                            <div class="outline_" v-for="(item,index) in outline_list">
                                <div class="d-f p-r outline_title">
                                    <div class="c99">章节{{index+1}}</div>
                                    <div class="c33 f-w  ov">{{item.chapterTitle}}</div>
                                </div>
                                <div class="d-f p-r outline_text p-r" v-for="items in item.chapterContents">
                                    <div class="c99"></div>
                                    <div class="c33  ov">{{items.chapterTitle}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="buts" style="margin-top: 20px;">
                            <div class="t-c but" style="width: 100% !important;" @click="next_">下一步</div>
                        </div>
                    </div>
                    <!-- <li v-if="themelist_.length > 0" class="step c33 f30">
                        您好，您的指令已发送，请点击下一步操作。
                        <div class="t-c" @click="next_">下一步</div>
                    </li> -->
                </ul>
            </div>
            <div v-show="type == 2" style="padding-bottom:calc( var(--van-tabbar-height));">
                <div style="padding-bottom:calc( var(--van-tabbar-height));">
                    <div class="top">
                        <div class="f32 c24 f-w">您好，请选择您想要的PPT模板样式 </div>
                        <div class="c99 f26">请在以下模板中选择您需要的模板样式，AI会根据您选择的模板样式帮您生成相关PPT内容。 </div>
                    </div>
                    <!-- <div class="c99 f24 t-c">15:11</div> -->
                    <div class="ydlist">
                        <div class="lists p-r" @click="show_(index,item.key)" v-for="(item,index) in themelist_">
                            <img draggable="false" :src="item.thumbnail" alt="">
                            <div>{{item.name}}</div>
                            <img draggable="false" v-show="show == index" class="p-a" src="http://test.bjclb.cn/uploads/assets/mengban.png" alt="">
                        </div>
                    </div>
                    <div class="buts d-f j-b">
                        <div class="t-c but cff" style="background: linear-gradient(to right, #ff6034, #ee0a24) ; " @click="type = 1">返回</div>
                        <div class="t-c but" @click="next_step">下一步</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="return d-f j-c" v-show="type == 1">
            <div class="textareabg">
                <van-field
                    maxlength="8000"
                    :border="false"
                    v-model="message"
                    rows="1"
                    autosize
                    type="textarea"
                    autofocus
                    :disabled="outline_show"
                />
            </div>
            <!-- <textarea  ref="autoResizeTextarea" v-model="message" @input="resizeTextarea" placeholder="请输入要生成的PPT内容"></textarea> -->
            <div class="p-r " @click="outlinelist"  :class="[outline_show?'click_':'scale-box']">
                <img draggable="false" class="bgs" src="http://test.bjclb.cn/uploads/assets/return_.png" alt="">
                <img draggable="false" class="p-a" src="http://test.bjclb.cn/uploads/assets/return_s.png" alt="">
            </div>
        </div>
        <div class="loding p-f" v-if="shows">
            <div class="center t-c">
                <img draggable="false" class="loding1" src="http://test.bjclb.cn/uploads/assets/loding1.png" alt="">
                <div class="c99 f30">PPT生成中…</div>
                <div class="loding2 d-f">
                    <div class="progress-wrap">
                        <div class="progress-inner" :style="'width:' + num + '%;'">
                            <div class="progress-nums"></div>
                        </div>
                    </div>
                    <!-- <img draggable="false" :style="'width:' + num + '%;'" src="http://test.bjclb.cn/uploads/assets/loding2.png" alt=""> -->
                </div>
                <div class="c33 f12">LOADING…</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import Navi from "./Navi.vue";
import { ref, onMounted,onUnmounted } from "vue";
import router from "@/router";
import { make,themelist,pptProgress,createOutline } from "@/axios/index";
import { showFailToast,showLoadingToast,closeToast } from "vant";
const img = ref("http://test.bjclb.cn/uploads/assets/top.png");


const emit = defineEmits(["wholess", ""]);
const whole = () => {
  emit("wholess",1); // 回传 deleteOutcome为自定义名称
};
const type = ref<number>(1);
const screenWidth = ref(window.innerWidth);

const handleResize = () => {
  screenWidth.value = window.innerWidth;
};
const message = ref("");
const messages = ref("");
const show = ref<number>();
const num = ref<number>(0);
const show_type = ref<number>(0);
const shows = ref<boolean>(false);
const themelist_ = ref<Array>([]);
const outline_title = ref("");
const outline_list = ref([]);
const outline_show = ref<boolean>(false);
const template_show = ref<boolean>(false);
    
const next_ = async () => {
    type.value = 2
    outline_next()
};
const outlinelist = async () => {
    if(!message.value){
        showFailToast({ message: '请输入要生成的大纲内容', forbidClick: true });
        return
    }
    if(outline_show.value == true){
        return
    }
    show_type.value = 1
    outline_show.value = true
    outline_title.value = ""
    outline_list.value = []
    themelist_.value = []
    let { data } = await createOutline({
        query: message.value,
    });
    if (data.code == 0) {
        console.log(data.data);
        outline_show.value = false
        outline_title.value = data.data
        outline_list.value = data.data.outline.chapters
        messages.value = message.value
    } else {

    }
};
const outline_next = async () => {
    let { data } = await themelist({});
    if (data.code == 0) {
        template_show.value = true
        console.log(data.data);
        themelist_.value = data.data
        messages.value = message.value
    } else {

    }
};
onMounted(() => {
    // outline_next()
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
const theme = ref("");
const show_ = async (val,key) => {
    console.log(val);
    show.value = val
    theme.value = key
};
const sid = ref("");

const next_step = async (val) => {
    if(!theme.value){
        showFailToast({ message: '请选择需要生成的模板', forbidClick: true });
        return
    }
    showLoadingToast({
        message: '生成中...',
        forbidClick: true,
        overlay:true,
        duration:30000,
    });
    let { data } = await make({
        query: message.value,
        theme: theme.value,
    });
    if (data.code == 0) {
        closeToast()
        message.value = ""
        shows.value = true
        sid.value =data.data.sid
        var times = setInterval(function () {
        pptpro();
            if (num.value >= 100) {
                clearInterval(times)
                shows.value = false
                themelist_.value = []
                type.value = 1
                whole();
            }
        }, 4000);
    } else {

    }
};
const pptpro= async () => {
    let { data } = await pptProgress({
        sid:sid.value,
    });
    if(data.code == 0){
        num.value = data.data.process
    }
};
// const autoResizeTextarea = ref(null)
// const resizeTextarea = async (val) => {
//     const textarea = autoResizeTextarea.value;
//     textarea.style.height = 'auto';
//     textarea.style.height = `${textarea.scrollHeight - 30}px`;
//     console.log(textarea.scrollHeight);
    
// };
</script>

<style lang="scss" scoped>

.loding {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0, 0.3);
    z-index: 999;
}

.scale-box{
    transition: transform 0.5s ease-in-out;
    cursor: pointer;
    &:active{
        opacity: 0.8;
    }
}
.scale-box:hover {
    transform: scale(1.05);
}
@media screen and (max-width:1190px) {
    .list {
        margin-top: 24px;
        background: #FCFDFF;
        border-radius: 12px;
        border: 1px solid #EBEBEB;
        overflow: hidden;
        margin-right: 1%;
        width: calc(32.3% - 2px) !important;
        cursor: pointer;

        &:nth-child(4n) {
            margin-right: 1% !important;
        }

        &:nth-child(3n) {
            margin-right: 0% !important;
        }
    }
}

.content {
    width: calc(80% - 270px);
    margin: 65px auto;
    z-index: 2;
    min-width: 658px;
    .center {
        position: fixed;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        width: 574px;
        height: 350px;
        background-image: url("http://test.bjclb.cn/uploads/assets/loding.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: center;

        .loding1 {
            display: block;
            margin: 30px auto 13px auto;
        }

        .loding2 {
            width: 460px;
            background: #FFFFFF;
            border-radius: 6px;
            margin: 0 auto 17px auto;
            padding: 3px;
            img {
                height: 16px;
                border-radius: 10px;
            }
        }

        .f18 {
            margin-top: 30px;
        }
    }
    @media screen and (max-width:1190px) {
        .p-r_ {
            width: 100% !important;
        }
    }

    .title_s {
        width: 100%;

        img {
            width: 100%;
            height: auto;
        }
    }

    .pcul {
        margin-top: 15px;
        font-size: 14px;
        li {
            margin-top: 34px;
            display: flex;
            .click_{
                opacity: .4;
                cursor: not-allowed !important;
                &:active{
                    opacity:.4 !important;
                }
            }
            .p-r {
                background: rgba(255, 255, 255);
                padding:8px 12px;
                border-radius: 10px;
                width: 50%;
            }
            .van-cell{
                font-size: 14px !important;
                padding: 0;
                line-height: 30px;
            }
            :deep(.van-field__control) {
                max-height: 400px;
            }
            img {
                width: 110px !important;
                height: 46px !important;
                right: 0;
                bottom: 0;
            }
            span {
                padding: 8px 15px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 10px;
                border: 1px solid #FFFFFF;
            }
        }
    }

    .templatepc {
        margin-top: 34px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0px 0px 8px 0px rgba(233, 238, 254, 0.2);
        border-radius: 10px;
        border: 1px solid #FFFFFF;
        padding: 20px 30px 0 30px;
        font-size: 14px;
        .template_ {
            display: flex;
            flex-wrap: wrap;
            .list {
                margin-top: 24px;
                background: #FCFDFF;
                border-radius: 12px;
                border: 1px solid #EBEBEB;
                overflow: hidden;
                margin-right: 1%;
                width: calc(24.2% - 2px);
                cursor: pointer;

                &:nth-child(4n) {
                    margin-right: 0%;
                }

                img {
                    width: 100%;
                    height: auto;
                }

                div {
                    padding: 10px 14px;
                }
                
                .p-a{
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                }
            }

            .lists {
                border: 1px solid #247AF1;
                opacity: 0.8;
            }
        }
    }
    .template_color{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-width: 1250px;
        min-height: 100vh;
        margin-top: 0;
        background-color: #fff;
        border-radius: 0;
        overflow: auto;
        z-index: 9;
        .template_title{
            position: fixed;
            top: 0;
            left: 0;
            align-items: center;
            background-color: #fff;
            box-shadow: 0 0 8px 0 #bdc3fb4d;
            display: flex;
            height: 80px;
            justify-content: space-between;
            z-index: 99;
            width: 100%;
            .click_{
                opacity: .4;
                cursor: not-allowed !important;
                &:active{
                    opacity:.4 !important;
                }
            }
            .but{
                padding: 0;
                margin: 0;
                margin-right: 50px;
                font-size: 14px;
            }
            .template_left{
                display: flex;
                align-items: center;
                color: #161724;
                font-size: 21px;
                font-weight: 600;
                padding-left: 50px;
                img{
                    width: 18px;
                    cursor: pointer;
                    height: 18px;
                    margin-right: 20px;
                    margin-top: 3px;
                }
            }
        }
        .template_s{
            &::-webkit-scrollbar {
                display: none;
            }
            height: 100vh;
            overflow: auto;
            .template_moban{
                padding:100px 100px 0px 100px;
                font-size: 14px;
            }
            .template_{
                display: flex;
                flex-wrap: wrap;
                margin: 0px 100px;
                padding: 0px 0 100px 0;
                font-size: 14px;
                .list {
                    width: 19%;
                    margin-top: 24px;
                    background: #FCFDFF;
                    border-radius: 12px;
                    border: 1px solid #EBEBEB;
                    overflow: hidden;
                    cursor: pointer;
                    margin-right: 1%;
                    &:nth-child(5n) {
                        margin-right: 0%;
                    }

                    img {
                        width: 100%;
                        height: auto;
                    }

                    div {
                        padding: 20px 14px;
                    }
                    
                    .p-a{
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                    }
                }
            }
        }
    }
    .but {
        width: 205px;
        height: 45px;
        background-image: url('http://test.bjclb.cn/uploads/assets/x.png');
        background-size: 100% 100%;
        margin: 39px auto;
        cursor: pointer;
    }
    .outline{
    padding:0 20px 10px 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 10px;
    .c99{
        margin-right: 20px;
        width: 50px;
        text-align: right;
    }
    .outline_text{
        margin-top: 10px;
        padding-left: 20px;
        .c33{
            width: calc(100% - 60px);
        }
        &::after{
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid #bfc7d6;
            width: 7px;
            height: 7px;
            z-index: 5;
            left: 77px;
            top: 50%;
            margin-top: -3.5px;
        }
        &::before{
            content: "";
            position: absolute;
            background-color: #bfc7d6;
            width: 1px;
            height: 33px;
            left: 58.5px;
            top: 50%;
            margin-top: -3.5px;
        }
        .c99{
            &::after{
                content: "";
                position: absolute;
                border-radius: 50%;           
                background-color: #bfc7d6;
                width:19px;
                height: 1px;
                z-index: 5;
                left: 59px;
                margin-top: 0px;
            }
        }
    }
    .outline_{
        &:last-child{
            .outline_text{
                &:last-child{
                    &::before{
                        height: 0;
                    }
                }
            }
        }
    }
    .outline_title{
        margin-top: 14px;
        .c33{
            width: calc(100% - 60px);
        }
        &:nth-child(2){
            &::before{
                height:0px;
            }
        }
        &::after{
            content: "";
            position: absolute;
            background-color: #bfc7d6;
            border-radius: 50%;
            width: 7px;
            height: 7px;
            z-index: 5;
            left: 56px;
            top: 50%;
            margin-top: -3.5px;
        }
        &::before{
            content: "";
            position: absolute;
            background-color: #bfc7d6;
            width: 1px;
            height: 33px;
            left: 58.5px;
            top: 50%;
            margin-top: -3.5px;
        }
    }
}
}
</style>


<style lang="scss" scoped>

.loding {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0, 0.3);
    z-index: 999;
}

.ydlist {
    background: #FFFFFF;
    border-radius: 20px 20px 0px 0px;
    margin: 30px 40px 0 40px;
    padding: 30px 30px 30px 30px;
    display: flex;
    flex-wrap: wrap;

    .lists {
        background: #FCFDFF;
        border-radius: 12px;
        border: 1px solid #EBEBEB;
        width: 300px;
        margin-right: 26px;
        margin-bottom: 30px;
        overflow: hidden;
        &:nth-child(2n) {
            margin-right: 0;
        }

        div {
            padding-left: 22px;
            line-height: 68px;
            height: 68px;
        }

        img {
            width: 300px;
            height: 158px;
        }
        .p-a{
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    }
    .lists_ {
        border: 1px solid #247AF1;
        opacity: 0.8;
    }
}

.buts {
    padding: 0 30px 30px 30px;
    background: #FCFDFF;
    margin: 0px 40px;

    .but {
        width: 45%;
        height: 88px;
        background: linear-gradient(90deg, #D2EBFD 0%, #D7E3FA 100%);
        border-radius: 20px;
        line-height: 88px;
    }
}

.return {
    position: fixed;
    bottom: var(--van-tabbar-height);
    left: 0;
    background-color: #fff;
    width: 100%;
    padding: 12px 0;
    .textareabg{
        
        .van-cell{
            font-size: 14px !important;
            padding: 0;
            line-height: 30px;
        }
        width: 596px;
        background: #F5F5F5;
        border-radius: 37px;
        margin-right: 20px;
        overflow: hidden;
        .van-field{
            padding:20px;
        }
        .van-cell{
            background: #F5F5F5;
        }
    }
    .bgs {
        width: 74px;
        height: 74px;
    }
    .click_{
        opacity: .4;
        cursor: not-allowed !important;
        &:active{
            opacity:.4 !important;
        }
    }
    
    .scale-box{
        &:active{
            opacity: 0.8;
        }
    }
    .p-a {
        left: 50%;
        top: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
}

.contents {
    .center {
        position: fixed;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        width: 574px;
        background-image: url("http://test.bjclb.cn/uploads/assets/lodings.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: center;
        padding-bottom: 40px;

        .loding1 {
            display: block;
            margin: 30px auto 13px auto;
        }

        .loding2 {
            width: 460px;
            background: #FFFFFF;
            border-radius: 6px;
            margin: 24px auto 16px auto;
            padding: 3px;
            img {
                height: 16px;
                border-radius: 10px;
            }
        }

        .f18 {
            margin-top: 30px;
        }
    }
    z-index: 1;
    width: 100%;
    .templatepc{
        padding: 20px;
        border-radius: 30px;
        background-color: #fff;
    }
    .outline{
    padding:0 20px 10px 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 10px;
    .c99{
        margin-right: 40px;
        width: 100px;
        text-align: right;
    }
    .outline_text{
        margin-top: 20px;
        padding-left: 40px;
        .c33{
            width: 440px;
        }
        &::after{
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid #bfc7d6;
            width: 14px;
            height: 14px;
            z-index: 5;
            left: 151px;
            top: 50%;
            margin-top: -7px;
        }
        &::before{
            content: "";
            position: absolute;
            background-color: #bfc7d6;
            width: 1px;
            height: 58px;
            left: 117px;
            top: 50%;
            margin-top: -3.5px;
        }
        .c99{
            &::after{
                content: "";
                position: absolute;
                border-radius: 50%;           
                background-color: #bfc7d6;
                width:38px;
                height: 1px;
                z-index: 5;
                left: 117px;
                margin-top: 0px;
            }
        }
    }
    .outline_{
        &:last-child{
            .outline_text{
                &:last-child{
                    &::before{
                        height: 0;
                    }
                }
            }
        }
    }
    .outline_title{
        margin-top: 14px;
        .c33{
            width:450px;
        }
        &:nth-child(2){
            &::before{
                height:0px;
            }
        }
        &::after{
            content: "";
            position: absolute;
            background-color: #bfc7d6;
            border-radius: 50%;
            width: 14px;
            height: 14px;
            z-index: 5;
            left: 110px;
            top: 50%;
            margin-top: -3.5px;
        }
        &::before{
            content: "";
            position: absolute;
            background-color: #bfc7d6;
            width: 1px;
            height: 60px;
            left:116.5px;
            top: 50%;
            margin-top: -3.5px;
        }
    }
}
}

.ydui {
    margin: 50px;
    li {
        color: #333;
        display: flex;
        margin: 40px 0;

        span {
            border-radius: 20px 20px 20px 0px;
            padding: 26px 30px;
            background-color: #fff;
        }
    }
}


.step {
    display: block !important;
    padding: 26px 30px;
    background-color: #fff;
    border-radius: 20px 20px 20px 0px;

    div {
        height: 88px;
        background: linear-gradient(90deg, #D2EBFD 0%, #D7E3FA 100%);
        border-radius: 20px;
        margin-top: 30px;
        line-height: 88px;
    }
}

.top {
    width: 690px;
    background-image: url("http://test.bjclb.cn/uploads/assets/phoneindex.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 30px auto;

    .f32 {
        padding: 30px;
    }

    .c99 {
        padding: 0 30px 30px 30px;
    }
}

.title {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    background-color: #247af1;
    color: #ffffff;
    font-weight: bold;
    font-size: 36px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    z-index: 9;
}

.bg_s {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
}
.container{
    height: 50px;
    margin-top: 40px
}

.container div{
	background: #3773E8;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	float: left;
	top: 40px;
	position: relative;
	margin-left: 10px;
}

.container div:nth-child(1),.container div:nth-child(3),.container div:nth-child(5){
	animation: animateone 1s linear infinite;
	top: 20px;
}

.container div:nth-child(2),.container div:nth-child(4){
	animation: animatetwo 1s linear infinite;
	top: -20px;
}

@keyframes animateone{
	0%{
		top:20px;
		transform:scale(1);
	}
	50%{
		top:-20px;
		transform:scale(0.5);
	}
}

@keyframes animatetwo{
	0%,100%{
		top:-20px;
		transform:scale(0.5);
	}
	50%{
		top:20px;
		transform:scale(1);
	}
}
.progress-wrap {
    width: 100%; 
    height: 20px;
    border-radius: 30px;
    position: relative; 
  }
  .progress-wrap span{
    position:absolute;
    left:50%;
    top:-20px;
    color:#000;
  }
  /*进度条底层背景样式*/
  .progress-inner {  
    height: 20px;
    background: rgb(142 193 255 / 20%); 
    border-radius: 8px;
  }
  /*进度层样式效果，使用动画效果*/
  .progress-nums {
    height: 20px;
    border-radius: 6px; 
    background: repeating-linear-gradient(-45deg, #008bdd 25%, #49beff 0, #49beff 50%, #008bdd 0, #008bdd 75%, #49beff 0);
    background-size: 16px 16px;
    animation: panoramic 30s linear infinite;
  }
  /*定义动画*/
  @keyframes panoramic{
    to {
      background-position: 200% 0;
    }
  }
</style>